Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP29。

接著就要處理 OrderDetail 資料的刪除的處理，而要處理當然也就要調整 MockData、DataService 與 IDataService 的設計。

首先，在 IDataService 增加一個 DeleteOrderDetail 方法的宣告，並透過實作介面的處理幫 MockData 與 DataService 都實作好 DeleteOrderDetail 方法。

在 IDataService：

int DeleteOrderDetail(int orderDetailId);

完成結果如下圖：

在 DataService:

public int DeleteOrderDetail(int orderDetailId)
{
    throw new NotImplementedException();
}

完成結果如下圖：

在 MockData:

public int DeleteOrderDetail(int orderDetailId)
{
     return orderDetails.Remove(orderDetails.FirstOrDefault((orderDetail) => orderDetail.Id == orderDetailId)) ? 1 : 0;
}

完成結果如下圖：

而由於是要在訂單詳細列表的這個畫面進行刪除的處理，所以繼續要調整的是 OrderDetailsPage 與 OrderDetailsPageViewModel。

首先，先在 OrderDetailsPageViewMode 設計一個 Delete 方法：

[RelayCommand]
private async void Delete(OrderDetailDisplay orderDetailDisplay)
{
    var isDelete = await Shell.Current.DisplayAlert("確定刪除?", orderDetailDisplay.ProductName, "Yes", "Cancel");
    if (isDelete)
    {
        var deleteSuccess = App.DataService.DeleteOrderDetail(orderDetailDisplay.OrderDetailId);
        if (deleteSuccess == 1)
            OrderDetailDisplays.Remove(orderDetailDisplay);
    }
}

完成結果如下圖：

接著再到 OrderDetailsPage 調整畫面的設計，找到原本設計的 CollectionView 除了將原本的 SelectionMode 屬性改為 "None" 之外，並在其 DataTemplate 中增加 SwipeView 的設計：

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem
                BackgroundColor="Red"
                Command="{Binding Source={RelativeSource
                                    AncestorType={x:Type viewmodels:OrderDetailsPageViewModel}},
                                    Path=DeleteCommand}"
                CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"
                Text="刪除" />
        </SwipeItems>
    </SwipeView.LeftItems>
...
</SwipeView>

完成結果如下圖：

接著來看看上述設計的實際操作：

1. 從訂單列表中選取某個訂單進到訂單明細列表：
   

2. 在訂單明細列表當中選取某個商品項目並向右滑動：
   

3. 點選左側出現的 "刪除" 按鈕後出現提示對話框訊息，點選 "Yes"：
   

4. 訂單明細列表中就少了該品項：